<template>
  <!-- 动态组件 -->
    <div>
      <!-- 全局组件 -->
      <div>
        <myComponent></myComponent>
        <My-input></My-input>
      </div>
      <!-- 局部组件 -->
      <div>
        <button @click="flag ='activeA'">A组件</button>
        <button @click="flag ='activeB'">B组件</button>
        <!-- 第一种 -->
          <!-- <activeA v-if="flag == 'activeA'"></activeA>
          <activeB v-else></activeB> -->
        <!--   第二种  动态模块组件 -->
          <!-- 无缓存 -->
          <!-- <component :is="flag"></component> -->
          <!-- 缓存处理 include 会 缓存  多个用,隔开
                        exclude 不会 缓存
          -->
          <keep-alive include="activeA,activeB">
            <component :is="flag"></component>
          </keep-alive>

      </div>


    </div>
</template>

<script>
import activeA from '@/components/activeA.vue'
export default {
    name: 'Test',
  components: {
    activeA, //同步加载
    activeB: () => import('../../components/activeB.vue') //异步加载
  },
    data() {
        return {
          flag:'activeA'
        };
    },
    props:{

    },
    mounted() {

    },

    methods: {

    },
};
</script>

<style scoped>

</style>
